<template>
  <div class="newMv">
    <div class="top">
      <div class="left">
        <span class="title">最新MV</span>
        <div class="region">
          <span :class="area === '内地' ? 'area' : '' " @click="areaChange('内地')">内地</span>|
          <span :class="area === '港台' ? 'area' : '' " @click="areaChange('港台')">港台</span>|
          <span :class="area === '欧美' ? 'area' : '' " @click="areaChange('欧美')">欧美</span>|
          <span :class="area === '日本' ? 'area' : '' " @click="areaChange('日本')">日本</span>|
          <span :class="area === '韩国' ? 'area' : '' " @click="areaChange('韩国')">韩国</span>
        </div>
      </div>
      <span @click="toNewMvListPage">更多></span>
    </div>
    <div class="newMvList">
      <div class="li" v-for="(item, index) in newMvlist" :key="index" @click="toVideoPage(item.id)">
        <div class="img">
          <img :src="item.cover" />
          <div class="playCount"><i class="iconfont icon-video"></i> {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }} </div>
        </div>
        <div class="name">{{ item.name }}</div>
        <div class="artistName">
          <a v-for="(item1, index) in item.artists" :key="index">
          {{ index + 1 === item.artists.length ? item1.name : item1.name + ' / ' }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewMvList } from '../../network/videomv.js'
export default {
  data () {
    return {
      area: '内地',
      newMvlist: []
    }
  },
  methods: {
    areaChange (area) {
      this.area = area
      this.getNewMvList(this.area)
    },
    toNewMvListPage () {
      this.$router.push('/all_mv')
    },
    // MV播放页面
    toVideoPage (id) {
      this.$router.push('/video_player/' + id)
    },
    getNewMvList (area) {
      getNewMvList(area).then(res => {
        // console.log(res.data)
        this.newMvlist = res.data.data
      })
    }
  },
  created () {
    this.getNewMvList(this.area)
  }
}
</script>

<style lang="less" scoped>
  .newMv {
    width: 100%;
    .top {
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #e1e1e2;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .left {
        display: flex;
        flex-direction: row;
        .title {
          font-size: 23px;
        }
        .region {
          display: flex;
          align-items: flex-end;
          color: #cccccc;
          span {
            color: #888888!important;
            padding: 0 15px;
            // border-right: 2px solid #cccccc;
          }
          .area {
            color: #333333!important;
          }
        }
      }
      span {
        cursor: pointer;
      }
    }
    .newMvList {
      width: 100%;
      height: 560px;
      margin-bottom: 50px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      .li {
        width: 310px;
        margin: 15px 0;
        box-sizing: border-box;
        cursor: pointer;
        .img {
          position: relative;
          width: 100%;
          img {
            width: 100%;
            height: 200px;
          }
          .playCount {
            position: absolute;
            top: 0;
            right: 0;
            width: 30%;
            height: 25px;
            color: #fff;
            text-align: right;
            padding-right: 8px;
            background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.4));
            transform: translateY(0);
            transition: transform 0.5s;
            i {
              font-size: 16px;
            }
          }
        }
        .name, .artistName {
          a {
            color: #666666;
            font-size: 15px;
          }
        }
      }
    }
  }
</style>
